Set phasers on stun

USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.

Normal

Button

Button

Button

Hover

Button

Button

Button

Pressed

Button

Button

Button

Focused

Button

Button

Button

Beep Beep! I am an error !

close

Mission complete.

close

Warning: Borg ship Incoming!

close

All hands on deck! Captain on bridge.

close

Set phasers on stun

USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.

Normal

Button

Button

Button

Hover

Button

Button

Button

Pressed

Button

Button

Button

Focused

Button

Button

Button

Beep Beep! I am an error !

close

Mission complete.

close

Warning: Borg ship Incoming!

close

All hands on deck! Captain on bridge.

close

Set phasers on stun

USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.

Normal

Button

Button

Button

Hover

Button

Button

Button

Pressed

Button

Button

Button

Focused

Button

Button

Button

Beep Beep! I am an error !

close

Mission complete.

close

Warning: Borg ship Incoming!

close

All hands on deck! Captain on bridge.

close

Stand Alone Colors

Below are standalone color definitions we use.

.border

.border strong

.text

.text strong

.shadow

.scrim

$inherited.colors.custom.one

dark:

#434547

light:

#434547

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#434547

light:

#434547

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#919192

light:

#919192

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#919192

light:

#919192

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#9ea89e

light:

#556f68

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#9ea89e

light:

#556f68

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#007f9b

light:

#007f9b

we use

$inherited.colors.custom.six

for

custom six

Background Colors

Below are background color definitions we use.

.base

.step-1

.step-2

.overlay

.code

$inherited.colors.custom.one

dark:

#131a13

light:

#e5e6e2

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#131a13

light:

#e5e6e2

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#182517

light:

#293434

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#182517

light:

#293434

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#233221

light:

#7c9e9d

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#233221

light:

#7c9e9d

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(0, 0, 0, 0.8)

light:

rgba(0, 0, 0, 0.8)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(0, 0, 0, 0.8)

light:

rgba(0, 0, 0, 0.8)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#2B303B

light:

#eaeaea

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#2B303B

light:

#eaeaea

we use

$inherited.colors.custom.five

for

custom five

CTA Primary Colors

Below are cta primary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#0d712c

light:

#0d712c

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#0d712c

light:

#0d712c

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#129039

light:

#129039

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#129039

light:

#129039

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#0a690b

light:

#0a690b

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#0a690b

light:

#0a690b

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(44, 201, 181, 0.4)

light:

rgba(44, 201, 181, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(44, 201, 181, 0.4)

light:

rgba(44, 201, 181, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#195c2e

light:

#195c2e

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#195c2e

light:

#195c2e

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#2b8074

light:

#2b8074

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#2b8074

light:

#2b8074

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#feffff

light:

#feffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#feffff

light:

#feffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Secondary Colors

Below are cta secondary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#61b5dc

light:

#61b5dc

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#61b5dc

light:

#61b5dc

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#1da7e6

light:

#1da7e6

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#1da7e6

light:

#1da7e6

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(79, 178, 223, 0.4)

light:

rgba(79, 178, 223, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(79, 178, 223, 0.4)

light:

rgba(79, 178, 223, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#5ea4c3

light:

#5ea4c3

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#5ea4c3

light:

#5ea4c3

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#209fdb

light:

#209fdb

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#209fdb

light:

#209fdb

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Tertiary Colors

Below are cta tertiary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#556375

light:

#556375

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#556375

light:

#556375

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#636d7a

light:

#636d7a

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#636d7a

light:

#636d7a

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#3b4047

light:

#3b4047

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#3b4047

light:

#3b4047

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(85, 99, 117, 0.4)

light:

rgba(85, 99, 117, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(85, 99, 117, 0.4)

light:

rgba(85, 99, 117, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#4a4d51

light:

#4a4d51

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#4a4d51

light:

#4a4d51

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#e2e4e7

light:

#e2e4e7

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#e2e4e7

light:

#e2e4e7

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Danger Colors

Below are cta danger color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#f1bdb6

light:

#f1bdb6

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#f1bdb6

light:

#f1bdb6

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#f9e4e1

light:

#f9e4e1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#f9e4e1

light:

#f9e4e1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#d46a63

light:

#d46a63

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#d46a63

light:

#d46a63

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#faeceb

light:

#faeceb

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#faeceb

light:

#faeceb

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#d97973

light:

#d97973

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#d97973

light:

#d97973

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#E9968C

light:

#e9968c

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#E9968C

light:

#e9968c

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#1C1B1F

light:

#FFFBFE

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#1C1B1F

light:

#FFFBFE

we use

$inherited.colors.custom.seven

for

custom seven

Accent Colors

Below are accent color definitions we use.

.primary

.secondary

.tertiary

$inherited.colors.custom.one

dark:

#4ed42d

light:

#4ed42d

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#4ed42d

light:

#4ed42d

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#4fb2df

light:

#4fb2df

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#c5cbd7

light:

#c5cbd7

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#c5cbd7

light:

#c5cbd7

we use

$inherited.colors.custom.three

for

custom three

Error Colors

Below are error colors definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#2a2a24

light:

#2a2a24

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#2a2a24

light:

#2a2a24

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#f5bdbb

light:

#f5bdbb

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#f5bdbb

light:

#f5bdbb

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#df2b2b

light:

#df2b2b

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#df2b2b

light:

#df2b2b

we use

$inherited.colors.custom.three

for

custom three

Success Colors

Below are success colors definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#282f25

light:

#282f25

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#282f25

light:

#282f25

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#e3f0c4

light:

#e3f0c4

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#e3f0c4

light:

#e3f0c4

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#3d741f

light:

#3d741f

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#3d741f

light:

#3d741f

we use

$inherited.colors.custom.three

for

custom three

Info Colors

Below are info colors definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#252f2a

light:

#252f2a

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#252f2a

light:

#252f2a

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#252f2a

light:

#252f2a

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#252f2a

light:

#252f2a

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#252f2a

light:

#252f2a

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#252f2a

light:

#252f2a

we use

$inherited.colors.custom.three

for

custom three

Warning Colors

Below are warning color definitions we use.

.base

.text

.border

$inherited.colors.custom.one

dark:

#2a2f24

light:

#2a2f24

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#2a2f24

light:

#2a2f24

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#fbefba

light:

#fbefba

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#fbefba

light:

#fbefba

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#966220

light:

#966220

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#966220

light:

#966220

we use

$inherited.colors.custom.three

for

custom three

Custom Colors

Below are custom color definitions we use.

.one

.two

.three

.four

.five

.six

.seven

.eight

.nine

.ten

$inherited.colors.custom.one

dark:

#ed753a

light:

#ed753a

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#ed753a

light:

#ed753a

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#f3db5f

light:

#f3db5f

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#f3db5f

light:

#f3db5f

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#8fdcf8

light:

#8fdcf8

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#8fdcf8

light:

#8fdcf8

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#7a65c7

light:

#7a65c7

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#7a65c7

light:

#7a65c7

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#eb57be

light:

#eb57be

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#eb57be

light:

#eb57be

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#ef8dd6

light:

#ef8dd6

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#ef8dd6

light:

#ef8dd6

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#7564be

light:

#7564be

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#7564be

light:

#7564be

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.eight

dark:

#d554b3

light:

#d554b3

we use

$inherited.colors.custom.eight

for

custom eight

$inherited.colors.custom.eight

dark:

#d554b3

light:

#d554b3

we use

$inherited.colors.custom.eight

for

custom eight

$inherited.colors.custom.nine

dark:

#ec8943

light:

#ec8943

we use

$inherited.colors.custom.nine

for

custom nine

$inherited.colors.custom.nine

dark:

#ec8943

light:

#ec8943

we use

$inherited.colors.custom.nine

for

custom nine

$inherited.colors.custom.ten

dark:

#da7a4a

light:

#da7a4a

we use

$inherited.colors.custom.ten

for

custom ten

$inherited.colors.custom.ten

dark:

#da7a4a

light:

#da7a4a

we use

$inherited.colors.custom.ten

for

custom ten